<template>
	<view class="context"
	:style="{
		'background-image':`url(${user_info.top_bgc})`
	}"
	>
		<view class="content">
			<view class="left"
			:style="{
				'background-image':`url(${user_info.avater})`,
				'objectFit':'contain'
			}"
			/>
			
			<view class="right">
				<UserInfoForHomeComponent :user_info="user_info"/>
			</view>
		</view>
	</view>
</template>

<script>
	import user_info from '@/static/a_post/user_info';
	export default {
		name:"HomePageTopComponent",
		data() {
			return {
				user_info
			};
		}
	}
</script>

<style scoped lang="scss">
.context{
	
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	height: 30vh;
	box-sizing: border-box;
	box-shadow: $g-shadow;
	position: relative;
	background: transparent;
	background-size: cover;
	
	.content{
		position: absolute;
		width: 100%;
		height: 140rpx;
		bottom: 10%;
		// border: solid 1rpx #fff;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 0 40rpx;
		.left{
			width: 140rpx;
			height: 100%;
			
			// border: solid 2rpx #fff;
			background-repeat: no-repeat;
			border-radius: 50%;
			background-size: cover;
		}
		.right{
			width: 500rpx;
			height: 100%;
			// border: solid 2rpx #fff;
			margin-left: 30rpx;
			
		}
	}
}
</style>